<template>
  <van-nav-bar title="VueShop" />
  
  <van-pull-refresh v-model="refreshing" @refresh="refresh">

    <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item v-for="swiper in swipeList" :key="swiper.id">
          <van-image :src="swiper.thumbs_text" @click="toProductInfo(swiper.id)"/>
        </van-swipe-item>
      </van-swipe>

    <van-grid clickable :column-num="4" :icon-size="60" :border="false">
      <van-grid-item icon="/assets/images/quanbu.png" text="全部商品" to="/product" />
      <van-grid-item icon="/assets/images/zibo.png" text="商品直播" to="/live" />
      <van-grid-item icon="/assets/images/youhui.png" text="优惠活动" to="/coupon" />
      <van-grid-item icon="/assets/images/bandan.png" text="榜单排行" to="/product/rank" />
    </van-grid>

    <div class="type">新品推荐</div>
    <!-- 加载列表 -->
    <van-list
      v-model:loading="loading"
      :finished="finished"
      :offset="10"
      :immediate-check="false"
      finished-text="没有更多了"
      @load="load"
    >
      <ul class="proul">
        <li v-for="product in list" :key="product.id">
          <router-link :to="`/product/info?id=${product.id}`">
            <van-image
              width="100%"
              height="auto"
              fit="cover"
              :src="product.thumbs_text"
            />
          </router-link>

          <router-link :to="`/product/info?id=${product.id}`">
            <p class="tit">{{product.name}}</p>
          </router-link>
          <div class="price">
            <p>￥{{product.price}} / {{product.unit_text}}</p>
          </div>
        </li>
      </ul>
    </van-list>
  </van-pull-refresh>

  <Tabbar />
</template>

<script setup> 
  const {proxy} = getCurrentInstance()
  const swipeList = ref([])
  const list = ref([]) //数据列表
  const page = ref(1)  //分页
  const loading = ref(false) //加载状态
  const finished = ref(false) //是否无更多数据
  const refreshing = ref(false) //下拉刷新
  onBeforeMount(()=>refresh())
//下拉刷新
  const refresh = async () =>
  {
    //可以去掉定时器
    setTimeout(() => {
      //清空查询参数
      page.value = 1
      list.value = []
      swipeList.value = []
      finished.value = false
      loading.value = true

      //加载数据方法
      load()
    }, 1000)
  }

  //加载数据方法
  const load = async () =>
  {
    let result = await proxy.$GET({
      url:'/product/index',
      params:{
        flag:'2',
      }
    })
    if(result)
    {
      swipeList.value = result.data
    }
    result = await proxy.$GET({
      url:'/product/index',
      params:{
        pageSize:6,
        page:page.value,
        flag:'1',
      }
    })
    if(result)
    {
      list.value = list.value.concat(result.data)
      refreshing.value = false
      loading.value = false
      finished.value = !result.has_more
      if(result.has_more)  page.value++
    }
  }
  const toProductInfo = (id)=>proxy.$router.push(`/product/info?id=${id}`)
</script>



<style scoped>
  @import url('/assets/css/home.css');
  @import url('/assets/css/ProductIndex.css');
</style>
